<script setup>

</script>

<template>
  <div>
    <!-- 1.定义路由链接 -->
    <div id="nav">
      <router-link to="/button">点击显示按钮</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/buttondetail">按钮组件的详细使用</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/link">Link链接</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/layout">Layout布局</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/container">Container布局容器</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/radio">Radio单选框</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/checkbox">CheckBox多选框</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/input">Input输入框</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/select">Select选择器</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/switch">Switch开关</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/datepicker">Datepicker日期选择器</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/upload">Upload上传组件</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/form">Form表单组件</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/alert">Alert提示组件</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/message">Message消息提示组件</router-link> &nbsp;&nbsp;&nbsp;
      <router-link to="/table">Table表格</router-link> &nbsp;&nbsp;&nbsp;


      <br/> <br/>


    </div>
    <!-- 2.定义路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

<style scoped>
.router-link-active {
  margin-right: 20px;
}
</style>
